<template>
  <div class="q-table" style="width:100%;">
    <q-table :table="table" highlight-current-row :columns="columns" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      table: {
        data: [
          {
            id: '1',
            date: '2019-09-25',
            name: '张三',
            status: '2',
            address: '广东省广州市天河区'
          },
          {
            id: '2',
            date: '2019-09-26',
            name: '张三1',
            status: '1',
            address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2'
          },
          {
            id: '3',
            date: '2019-09-27',
            name: '张三2',
            status: '3',
            address: '广东省广州市天河区3'
          }
        ],
        // 表格外操作，选中表格某行，可以将其数据传出
        toolbar: [
          {
            text: '返回上一个页面1',
            bind: {
              icon: 'el-icon-circle-plus-outline',
              type: 'danger',
            },

            fun: this.getBack
          },
          {
            text: '返回上一个页面2',
            bind: {
              icon: 'el-icon-circle-plus-outline',
              type: 'danger',
            },
            fun: this.getBack
          },
          {
            text: '返回上一个页面3',
            bind: {
              icon: 'el-icon-circle-plus-outline',
              type: 'danger',
            },
            fun: this.getBack
          },
          {
            text: '返回上一个页面4',
            bind: {
              icon: 'el-icon-circle-plus-outline',
              type: 'danger',
            },
            fun: this.getBack
          }
        ]
      },
      columns: [
        { prop: 'name', label: '姓名', minWidth: '100' },
        { prop: 'date', label: '日期', minWidth: '180' },
        { prop: 'address', label: '地址', minWidth: '220' },
        { prop: 'date', label: '日期', minWidth: '180' },
        { prop: 'address', label: '地址', minWidth: '220' }
      ],
    }
  },
  methods: {
    getBack(row) {
      console.log('选中行返回的数据', row)
    }
  }
}
</script>
